<template>
    <div>
        <!--<div class="crumbs">-->
        <!--<el-breadcrumb separator="/">-->
        <!--<el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 表单</el-breadcrumb-item>-->
        <!--<el-breadcrumb-item>编辑器</el-breadcrumb-item>-->
        <!--</el-breadcrumb>-->
        <!--</div>-->
        <div class="">
            <!--<div class="plugins-tips">-->
            <!--Vue-Quill-Editor：基于Quill、适用于Vue2的富文本编辑器。-->
            <!--访问地址：<a href="https://github.com/surmon-china/vue-quill-editor" target="_blank">vue-quill-editor</a>-->
            <!--</div>-->
            <quill-editor ref="myTextEditor" v-model="content" :options="editorOption" @change="setContent"></quill-editor>
            <!--<el-button class="editor-btn" type="primary" @click="submit">提交</el-button>-->
        </div>
    </div>
</template>

<script>
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';
    // import {quillRedefine} from 'vue-quill-editor-upload'
    import { quillEditor } from 'vue-quill-editor';
    import OSS from '../../../static/js/ossupload/aliyun-oss-sdk-6.0.2.js'
    import bus from '../common/bus'
    export default {
        name: 'Test',
        props:['text'],
        data(){
            return {
                content: '',
                editorOption: {
                    placeholder: '输入内容...',
                    modules:{
                        toolbar: {
                            container: [
                                ['bold', 'italic', 'underline', 'strike', 'image','link'],        // toggled buttons
                                ['blockquote', 'code-block','clean','formula'],
                                [{ 'header': 1 }, { 'header': 2 }],
                                [{ 'script': 'sub'}, { 'script': 'super' }],
                                [{ 'indent': '-1'}, { 'indent': '+1' }],
                                [{ 'direction': 'rtl' }],
                                [{ 'color': [] }, { 'background': [] }],
                                [{ 'font': [] }],
                                [{ 'align': [] }],
                                [{ 'size': ['small', false, 'large', 'huge'] }],
                                [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                            ],
                            handlers: {
                                // 'image': this.imgHandler
                                'image': ()=>{
                                    // $('#select-files').click();
                                    this.testUpload();
                                }
                            }
                        },
                    }
                }
            }
        },
        components: {
            quillEditor,
            // quillRedefine
        },
        created(){
            // setTimeout(s=>{
                this.content = this.text
            // }, 500)
        },
        methods: {
            onEditorChange({ editor, html, text }) {
                this.content = html;
            },
            submit(){
                this.$message.success('提交成功！');
            },
            setContent(){
                this.$emit('transferUser',this.content)
            },
            loadopen() {
                this.loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.2)'
                });
                setTimeout(() => {
                    this.loading.close();
                }, 5000);
            },
            loadclose() {
                this.loading.close();
            },
            testUpload(){
                var inp = document.createElement('input');
                inp.type="file";
                // inp.accept="image/*";
                inp.click();
                inp.onchange = (e)=> {
                    this.upFile(e.target);
                }
            },
            // 图片上传
            upFile(el) {
                let self = this;
                let client = new OSS({
                    region: "oss-cn-hangzhou", //阿里云获取
                    accessKeyId: "LTAITgXWmdLaLlYq",
                    accessKeySecret: "UoPJ9Z0MhK5VIVv86fo1rB7aHbFULH",
                    // bucket: "jzkj01",  //要存储的目录名
                    bucket: "jzkj02",  //要存储的目录名
                    stsToken: '',
                    endpoint: '',
                });
                // ----步骤2-------------------------------------------------
                var tempCheckpoint;
                var suffix = el.value.substr(el.value.indexOf(".")); // 获取文件后缀名
                var filename = 'vueeditor'+new Date().getTime() + suffix; // 为文件命名
                this.loadopen();
                // client.multipartUpload("tracingsource/" + filename, el.files[0], {
                client.multipartUpload("file/" + filename, el.files[0], {
                    parallel: 5, //并行上传的分片个数
                    progress: async function (p, checkpoint) {
                        tempCheckpoint = checkpoint;
                        // console.log(p)
                    },
                    checkpoint: tempCheckpoint,
                    mime: 'text/plain', //文件格式
                    meta:  null, //标识
                }).then(function (result) {
                    self.loadclose();
                    var url = result.res.requestUrls[0];
                    var length = url.lastIndexOf('?');
                    // var imgUrl = result.url || url.substr(0,length);//文件最终路径
                    var imgUrl = length>0?url.substr(0,length):url;
                    console.log(imgUrl);
                    // document.querySelector('#imgp').src = imgUrl + '?x-oss-process=image/resize,w_80,h_80';
                    let quill = self.$refs.myTextEditor.quill;
                    // 获取光标位置
                    let index = quill.getSelection().index;
                    // 插入图片
                    quill.insertEmbed(index, 'image', imgUrl);
                    // 调整光标到最后
                    quill.setSelection(index + 1);
                }).catch(function (err) {
                    self.loadclose();
                    console.log(err);
                });
            },
        },
        mounted () {
            // this.imgUpload1();
        },
    }

</script>
<style scoped>
    .editor-btn{
        margin-top: 20px;
    }
</style>
